window.addEventListener("load", function () {
	//功能1:海量API移入移出交互-----------------------------------------------------------
	let oldUrl = ""; //变量提升
	//遍历每一个li
	$("#apiList li").forEach(function (v) {
		// console.log(v);
		//给li绑定移入移出事件
		v.addEventListener("mouseover", function () {
			//背景色变蓝
			this.style.backgroundColor = "#2f7ee9";
			//文字变白
			this.style.color = "#fff";
			//切换为透明的图片
			//将图片后缀名前加一个-c
			//api01.svg=>api01-c.svg
			// console.log("哈哈", this.firstElementChild);
			let imgUrl = this.firstElementChild.src;
			console.log(imgUrl); //图片的路径
			this.firstElementChild.src = imgUrl.replace(".svg", "-c.svg");
			oldUrl = imgUrl; //用一个变量保存原先路径
		});
		//移出事件
		v.addEventListener("mouseout", function () {
			//背景色变白
			this.style.backgroundColor = "#fff";
			//文字变黑
			this.style.color = "#000";
			//切换为原先的图片
			this.firstElementChild.src = oldUrl;
		});
	});
	//功能2:独角兽区轮播图-----------------------------------------------------------------
	//思路:将多个图文结构unicornCont全部叠在一个区域,每隔3s显示一个,其他不显示
	//1.获取相关节点
	const unicornConts = $(".unicornCont");
	// 默认显示第0个
	unicornConts[0].style.opacity = "1";
	let index = 0; //下标为1
	//2.设置周期定时器每隔3s显示
	this.window.setInterval(function () {
		//3.排他思想,不管当前谁显示,每一个周期都让所有先消失
		unicornConts.forEach(function (v) {
			v.style.opacity = "0";
			// console.log(v);
		});
		//4.通过索引显示对应的位置,其他不显示
		// 0-> 河北   1-> 苏州   3->银联
		unicornConts[index].style.opacity = "1";
		//5.设置索引变量,每隔一个周期就++
		index++;
		//6.当索引达到最大限度时要回复到初始状态
		if (index > unicornConts.length - 1) {
			index = 0;
		}
	}, 3000);

	//功能3:实现banner轮播图切换-----------------------------------------------------------
	var mySwiper = new Swiper(".swiper", {
		autoplay: true, //可选选项，自动滑动

		pagination: {
			el: ".swiper-pagination",
			clickable: true,
		},
	});
	//如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
	new Swiper(".swiper");
	var mySwiper = document.querySelector(".swiper").swiper;
	mySwiper.slideNext();

	//功能4:点击回到顶部时，滚动条到顶部-----------------------------------------------------------
	$(".gun").addEventListener("click", function () {
		window.scrollTo({ left: 0, top: 0, behavior: "smooth" });
	});
	//功能5:慧集区移入移出交互---------------------------------------------------------------------
	//遍历每一个li
	$("#master li").forEach(function (v) {
		//给li绑定移入移出事件
		v.addEventListener("mouseover", function () {
			//背景色变蓝
			this.style.backgroundColor = "#2f7ee9";
			//文字变白
			this.style.color = "#fff";
		});
		//移出事件
		v.addEventListener("mouseout", function () {
			//背景色变白
			this.style.backgroundColor = "#fff";
			//文字变黑
			this.style.color = "#000";
		});
	});
	//功能6:数据安全区移入移出交互------------------------------------------------------------------
	//遍历每一个li
	$("#safe li").forEach(function (v) {
		//给li绑定移入移出事件
		v.addEventListener("mouseover", function () {
			//背景色变蓝
			this.style.backgroundColor = "#2f7ee9";
			//文字变白
			this.style.color = "#fff";
		});
		//移出事件
		v.addEventListener("mouseout", function () {
			//背景色变白
			this.style.backgroundColor = "#fff";
			//文字变黑
			this.style.color = "#000";
		});
	});
});
